﻿@{
    Layout = "_Layout";
}
<div id="app" style="position:relative">
    <div class="header">
        <div>
            <el-button icon="el-icon-back" v-on:click="back">返回</el-button>
        </div>

        <div style="padding-right:30px;">
            <el-button v-on:click="save">保存</el-button>
            <el-button type="primary" v-on:click="submit">提交</el-button>
        </div>
    </div>
    <!--基本信息-->
    <div class="inner-container" style="margin-top:70px;">
        <el-divider content-position="left">基本信息</el-divider>
        <el-form :model="course" :label-width="formLabelWidth" ref="courseForm" :rules="validateRules">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="course.name" autocomplete="off" clearable></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="费用">
                            <el-select v-model="course.isFree" placeholder="">
                                <el-option :key="1" label="免费" :value="true">
                                </el-option>
                                <el-option :key="2" label="收费" :value="false">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="价格">
                            <el-input v-model="course.normalPrice" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="白银会员价">
                            <el-input type="number" v-model="course.silverPrice" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="黄金会员价">
                            <el-input type="number" v-model="course.goldPrice" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="钻石会员价">
                            <el-input type="number" v-model="course.diamondPrice" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="所需时间">
                            <el-input type="number" v-model="course.lastTime" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="状态">
                            <el-select v-model="course.status" placeholder="" :disabled="course.status===0">
                                <el-option :key="1" label="已创建" :value="0" v-show="course.status===0">
                                </el-option>
                                <el-option :key="2" label="使用中" :value="1">
                                </el-option>
                                <el-option :key="3" label="已禁用" :value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="测试简介">
                            <el-input type="textarea" :autosize="{minRows:2,maxRow:6}" v-model="course.introduction" autocomplete="off" clearable placeholder="请输入测试简介">
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <!--图片管理-->
    <div class="inner-container">
        <el-divider content-position="left">图片管理</el-divider>
        <el-form>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="列表图">
                            <el-upload class="upload-demo"
                                       :action="listUploadUrl"
                                       :on-preview="handlePreview"
                                       :on-remove="listImageRemove"
                                       :on-success="listImageSuccess"
                                       :multiple="false"
                                       :limit=1
                                       :file-list="listImageList"
                                       list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="主图(轮播)">
                            <el-upload class="upload-demo"
                                       :action="mainUploadUrl"
                                       :on-preview="handlePreview"
                                       :on-remove="mainImageRemove"
                                       :on-success="mainImageSuccess"
                                       :multiple="false"
                                       :limit=1
                                       :file-list="mainImageList"
                                       list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="详情图">
                            <el-upload class="upload-demo"
                                       :action="detailUploadUrl"
                                       :on-preview="handlePreview"
                                       :on-remove="detaiImagesRemove"
                                       :file-list="detailImageList"
                                       :on-success="detailImagesSuccess"
                                       list-type="picture"
                                       :multiple="false">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <!--参与规则-->
    <div class="inner-container">
        <el-divider content-position="left">参与规则</el-divider>
        <el-row style="margin-bottom:10px;">
            <el-col :span="8" :offset="16">
                <div class="grid-content bg-purple-dark" style="display:flex;justify-content:flex-end;align-items:center;">
                    <el-button type="primary" icon="el-icon-plus" plain v-on:click="selectRules">添加规则</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row style="display:flex;justify-content:center;">
            <div style="width:70%;border:0.11px solid #DCDFE6">
                <el-table :data="evalRules" style="width:100%">
                    <el-table-column type="index" width="50" label="编号">

                    </el-table-column>
                    <el-table-column label="名称" width="400" property="name">

                    </el-table-column>
                    <el-table-column label="类型" width="100" property="ruleType">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===0">会员等级</span>
                            <span v-else-if="scope.row.tuleType===1">微信分享量</span>
                            <span v-else>抖音分享量</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="会员等级" width="120" property="wxShareCount">
                        <template slot-scope="scope">
                            <div v-if="scope.row.ruleType===0">
                                <span v-if="scope.row.memberLevel===0">普通会员</span>
                                <span v-else-if="scope.row.memberLevel===1" style="color:#606266">白银会员</span>
                                <span v-else-if="scope.row.memberLevel===2" style="color:#E6A23C">黄金会员</span>
                                <span v-else style="color:#409EFF">钻石会员</span>
                            </div>
                            <div v-else>
                                <span>----</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="微信分享量" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===1">{{scope.row.wxShareCount}}</span>
                            <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="抖音分享量" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===2">{{scope.row.wxShareCount}}</span>
                            <span v-else>----</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-row>
    </div>
    <!--图片预览对话框-->
    <el-dialog :title="dialogTitle" :visible.sync="imageDialogVisible" width="500px" :close-on-click-modal="false">
        <el-image style="width: 100%; height:500px;"
                  :src="previewUrl"
                  fit="contain">
        </el-image>
    </el-dialog>
    <!--编辑规则对话框-->
    <el-dialog :title="ruleDialogTitle" :visible="ruleDialogVisble" :close-on-click-modal="false" v-on:close="ruleDialogVisble=false" width="1000px">
        <el-form label-width="60px">
            <el-row>
                <el-table :data="insRules" style="width:100%">
                    <el-table-column type="index" width="50" label="编号">

                    </el-table-column>
                    <el-table-column label="名称" width="350" property="name">

                    </el-table-column>
                    <el-table-column label="类型" width="100" property="ruleType">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===0">会员等级</span>
                            <span v-else-if="scope.row.tuleType===1">微信分享量</span>
                            <span v-else>抖音分享量</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="会员等级" width="120" property="wxShareCount">
                        <template slot-scope="scope">
                            <div v-if="scope.row.ruleType===0">
                                <span v-if="scope.row.memberLevel===0">普通会员</span>
                                <span v-else-if="scope.row.memberLevel===1" style="color:#606266">白银会员</span>
                                <span v-else-if="scope.row.memberLevel===2" style="color:#E6A23C">黄金会员</span>
                                <span v-else style="color:#409EFF">钻石会员</span>
                            </div>
                            <div v-else>
                                <span>----</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="微信分享量" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===1">{{scope.row.wxShareCount}}</span>
                            <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="抖音分享量" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType===2">{{scope.row.wxShareCount}}</span>
                            <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.isIn" size="mini" icon="el-icon-delete" type="danger" v-on:click="removeRuleFromEval(scope.row)">移出</el-button>
                            <el-button v-else size="mini" icon="el-icon-plus" v-on:click="addRuleToEval( scope.row)">加入</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-form>
    </el-dialog>
</div>
<script>
    // 根实例
    var app = new Vue({
        el: "#app",
        // 根实例data
        data: {
            userType: '',  // 用户类型
            insId: '',
            actionType: '',  // 当前页面操作类型('编辑')
            mainUploadUrl: '',
            listUploadUrl: '',
            detailUploadUrl: '',
            dialogTitle: '查看图片',
            formLabelWidth: '100px',  // 标签宽度
            hostWithScheme: '',       // 主机域名（后端返回）

            // 目前编辑的课程对象
            course: {
                id: null,
                instructionId:null,
                name:'',
                courseType:0,
                classCount:10,
                duration:45,
                forAge:'',
                introdution:'',
                isFree:'',
                normalPrice:0,
                silverPrice:0,
                goldPrice:0,
                diamondPrice:0,
                rules:[]
            },
            // 列表图片
            listImageList: [],
            // 主图（也是轮播图）
            mainImageList: [],
            // 详情图
            detailImageList: [],
            // 是否显示预览图片对话框
            imageDialogVisible: false,
           
            // 规则对话框
            ruleDialogTitle: '选择规则',
            ruleDialogVisble: false,

            // 预览图片url
            previewUrl: '',
            
            // 课程表单验证
            validateRules: {
                name: [
                    { required: true, message: '请输入模块名称', trigger: 'blur' }
                ]
            },

            // 测试参与规则集合
            courseRules: [],

            // 当前机构参与规则集合
            insRules: [

            ]
        },
        // 根实例method
        methods: {
            back() {
                window.location.href = "/course/Index";
            },
            // 创建课程
            createCourse() {
                let that = this;
                debugger;
                return new Promise((resolve, reject) => {
                    axios.get(`/api/course/new-course`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                that.course = res.data.data;
                                if (that.course.listImage) {
                                    that.listImageList.push(that.course.listImage);
                                }
                                if (that.course.mainImage) {
                                    that.mainImageList.push(that.course.mainImage);
                                }
                                if (that.detailImages && that.detailImages.length > 0) {
                                    that.detailImageList = that.detailImages;
                                }
                                resolve();
                            }
                        });
                });
            },
            // 加载"待修改"
            loadEditingCourse() {
                let that = this;
                debugger;
                return new Promise((resolve, reject) => {
                    axios.get(`/api/course/get-course?id=${that.course.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                that.course = res.data.data;
                                if (that.course.listImage) {
                                    that.listImageList.push(that.course.listImage);
                                }
                                if (that.course.mainImage) {
                                    that.mainImageList.push(that.course.mainImage);
                                }
                                if (that.course.detailImages && that.course.detailImages.length > 0) {
                                    that.detailImageList = that.course.detailImages
                                }
                                resolve();
                            }
                        });
                });
            },
            // 提交测试
            submit() {
                let that = this;
                that.$refs['evalForm'].validate((valid) => {
                    if (valid) {
                        axios.post("/api/course/submit", that.course)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'success',
                                        customClass: 'course-message'
                                    });
                                    that.loadTableData();
                                }
                                else {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'error',
                                        customClass: 'course-message'
                                    });
                                }
                            });
                    }
                })
            },
            // 保存测试
            save() {
                let vm = this;
                vm.$refs['evalForm'].validate((valid) => {
                    if (valid) {
                        axios.post("/api/course/save", vm.course)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    vm.$message({
                                        message: res.data.msg,
                                        type: 'success',
                                        customClass: 'course-message'
                                    });
                                }
                                else {
                                    vm.$message({
                                        message: res.data.msg,
                                        type: 'error',
                                        customClass: 'course-message'
                                    });
                                }
                            });
                    }
                });
            },
            // 列表图片移除
            listImageRemove(file, fileList) {
                let that = this;
                axios.get(`/api/course/remove-image?id=${file.id}&actionType=listImage`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success',
                                customClass: 'course-message'
                            });
                        }
                        else {
                            that.$message({
                                message: res.data.msg,
                                type: 'error',
                                customClass: 'course-message'
                            });
                        }
                    });
            },
            // 轮播图片移除
            mainImageRemove(file, fileList) {
                let that = this;
                axios.get(`/api/course/remove-image?id=${file.id}&actionType=mainImage`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success',
                                customClass: 'course-message'
                            });
                        }
                        else {
                            that.$message({
                                message: res.data.msg,
                                type: 'error',
                                customClass: 'course-message'
                            });
                        }
                    });
            },
            // 详情图片移除
            detaiImagesRemove(file, fileList) {
                let that = this;
                axios.get(`/api/course/remove-image?id=${file.id}&actionType=detailImages`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success',
                                customClass: 'course-message'
                            });
                        }
                        else {
                            that.$message({
                                message: res.data.msg,
                                type: 'error',
                                customClass: 'course-message'
                            });
                        }
                    });
            },
            // 预览图片
            handlePreview(file) {
                let that = this;
                that.imageDialogVisible = true;
                that.previewUrl = that.hostWithScheme + file.url;
            },
            // 列表图上传成功
            listImageSuccess(response, file, fileList) {
                let that = this;
                that.listImageList = [];
                that.listImageList.push(response.data)
            },
            // 主图上传成功
            mainImageSuccess(response, file, fileList) {
                let that = this;
                that.mainImageList = [];
                that.mainImageList.push(response.data);
            },
            // 详情上传成功
            detailImagesSuccess(response, file, fileList) {
                let that = this;
                that.detailImageList.push(response.data);
            },
            // 设置上传组件url
            setUrl() {
                let that = this;
                that.mainUploadUrl = '/api/course/upload-main-image?evalId=' + that.course.id;
                that.listUploadUrl = '/api/course/upload-list-image?evalId=' + that.course.id;
                that.detailUploadUrl = '/api/course/upload-detail-images?evalId=' + that.course.id;
            },
            // 加载参与规则
            loadRules() {
                let vm = this;
                axios.get(`/api/rule/get-course-rules?id=${vm.course.id}`)
                    .then((res) => {
                        vm.evalRules = res.data.data;
                    });
            },
            // 加载机构规则
            loadInsRules() {
                let vm = this;
                return new Promise(resolve => {
                    axios.get(`/api/course/get-ins-rules?insId=${vm.insId}&evalId=${vm.course.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                vm.insRules = res.data.data;
                                resolve();
                            }
                        });
                })
            },
            // 打开编辑规则对话框
            selectRules() {
                let vm = this;
                vm.loadInsRules().then((res) => {
                    vm.ruleDialogVisble = true;
                });
            },
            // 向测评添加规则
            addRuleToEval(row) {
                let vm = this;
                axios.get(`/api/course/add-rule-to-eval?evalId=${vm.course.id}&ruleId=${row.id}`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            vm.loadInsRules();
                            vm.loadRules();
                        }
                    });
            },
            // 从测评中移除规则
            removeRuleFromEval(row) {
                let vm = this;
                axios.get(`/api/course/remove-rule-from-eval?evalId=${vm.course.id}&ruleId=${row.id}`)
                    .then((res) => {
                        vm.loadInsRules();
                        vm.loadRules();
                    })
            }
        },
        created() {
            let that = this;
            that.userType = @ViewBag.UserType;
            that.hostWithScheme = '@ViewBag.HostWithScheme';
            if (that.userType === 1) {
                that.insId = @ViewBag.InsId
                    that.actionType = '@ViewBag.ActionType'
                if (that.actionType == "add") {// 添加
                    that.createCourse()
                        .then(() => {
                            that.setUrl();
                            that.loadRules();
                        })
                }
                else if (that.actionType == 'edit') { // 编辑
                    that.course.id = @ViewBag.Id
                        that.loadEditingEval()
                            .then(() => {
                                that.setUrl();
                                that.loadRules();
                                that.getEvalParts()
                                    .then(() => {
                                        if (that.courseParts && that.courseParts.length > 0) {
                                            that.selectedTabName = String(that.courseParts[0].id);
                                        }
                                    })
                            });
                }
            }
        },
        mounted() {
        }
    });

    // 自定义验证
    // part 自定义验证
    var valiPartOrderType = (rule, value, callback) => {
        if (!value) {
            callback(new Error('请输入排序数字'));
        };
        if (!Number.isInteger(value) || value <= 0) {
            callback(new Error('必须为大于0的正整数'));
        }
        else {
            callback();
        }
    }

    // 验证测试题编号
    var valiQuestionNumber = (rule, value, callback) => {
        if (!value) {
            callback(new Error('必须填写测试题编号'));
        };
        let val = Number(value);
        if (!Number.isInteger(val) || val <= 0) {
            callback(new Error('必须为大于0的正整数'));
        }
        else {
            callback();
        }
    }

    // 验证测试题分数
    var valiQuestionScore = (rule, value, callback) => {
        if (!value) {
            callback(new Error('分数必须填'));
        };
        let val = Number(value);
        if (!Number.isInteger(val) || val <= 0) {
            callback(new Error('必须为大于0的正整数'));
        }
        else {
            callback();
        }
    }
</script>
<style>
    /*预览容器*/
    .previewContainer {
        height: 100%;
        width: 100%;
    }

    .course-message {
        margin-top: 100px;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        padding: 10px;
        z-index: 9999;
        right: 20px;
        opacity: 1;
        background-color: #fff;
        box-shadow: 0px 2px 10px #888888;
    }

    .el-divider__text {
        color: #409EFF !important
    }

    .inner-container {
        padding: 15px;
        border: 1px solid #DCDFE6;
        width: 95%;
        margin-top: 10px;
    }

    .eval-parts-tabs {
        height: 750px;
        border: 1px solid #DCDFE6;
    }

    .el-tabs__content {
        height: 100% !important;
    }

        .el-tabs__content .el-tab-pane {
            height: 100% !important;
        }

            .el-tabs__content .el-tab-pane .eval-part {
                height: 100% !important;
            }

                .el-tabs__content .el-tab-pane .eval-part .part-form {
                    height: 100%;
                    display: flex !important;
                    flex-direction: column;
                }

    .el-tabs--left .el-tabs__nav.is-left {
        float: none;
        width: 200px;
        padding-top: 30px;
    }

    .el-tabs--left .el-tabs__item.is-left {
        text-align: center;
    }

    /*测试题容器*/
    .questions-container {
        padding: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

        .questions-container .questions-list {
            width: 100%;
            margin-top: 10px;
            height: 590px;
            overflow-y: scroll;
        }

            .questions-container .questions-list .eval-part-questions {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

                .questions-container .questions-list .eval-part-questions .question-inner-container {
                    border: 1px solid #DCDFE6;
                    border-radius: 10px;
                    padding: 10px;
                }

            .questions-container .questions-list .no-question-container {
                display: flex;
                align-items: center;
                justify-content: center;
            }



    .no-course-parts {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .part-title-main {
        margin-top: 15px;
        border: 1px solid #DCDFE6;
    }

    .part-title-contianer {
        padding: 10px;
    }

        .part-title-contianer .part-title {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .part-title-contianer .part-order {
            font-size: 30px;
            position: absolute;
            left: 50px;
        }

        .part-title-contianer .part-name {
            font-size: 20px;
        }

    .part-title-main .part-content {
        padding-bottom: 10px;
        color: #909399;
        width: 100%;
        text-align: center;
        flex: 0;
    }

    .no-question-container {
        width: 100%;
        padding-top: 80px;
        text-align: center;
    }

        .no-question-container .no-question-span {
            color: #909399;
        }

    .question-content-row {
        white-space: normal;
        display: flex;
        margin-top: 5px;
        color: #a6a9ad;
    }

    .quesiton-number {
        border: 1px solid #a6a9ad;
        border-radius: 100%;
        font-size: 20px;
        font-weight: 600;
        color: #a6a9ad;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*模块组件---测试题对话框---选项*/
    .option-row {
        display: flex;
        flex-direction: column;
        border: 1px solid #DCDFE6;
        padding: 10px;
    }

        .option-row .add-option-button-container {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .option-row .table-container {
            width: 100%;
        }

    /*选项被选中的样式*/
    .optionSelected {
        border: 1px solid red;
    }

    .option-label {
        color: #a6a9ad;
    }

</style>